import {defineComponent, onMounted, reactive, ref} from 'vue'
import SearchFrom from "./comp/SearchForm"
import {header, operateBtn, toolBar} from "./data"
import {userStore} from "@/stores/user";
import {storeToRefs} from "pinia";
import TableList from "@/components/TableList";
import Dialog from "./comp/Dialog";
import {ElMessage, ElMessageBox} from "element-plus";
import {formatDateTime} from "@/utils/utils";

export default defineComponent({
    setup() {
        // 用user数据仓库
        const user_store = userStore()
        // 显示弹出框
        const visible = ref(false)
        // 是否为详情页面
        const isDetail = ref(false)
        const diaTitle = ref("编辑用户信息")
        // 从仓库中获取数据
        const {userList, userInfo} = storeToRefs(user_store)
        // 搜索参数
        const queryParams = reactive({
            user_name: undefined,
            pageNum: 1,
            pageSize: 10
        })

        const currentId = ref(undefined)
        const total = ref(0)

        // 获取用户列表
        const handleQuery = async () => {
            if (queryParams.user_name === '') {
                queryParams.user_name = undefined
            }
            const res = await user_store.getUserList(queryParams)
            total.value = res.total
        }

        // 改变页码大小
        const handleSizeChange = async (val) => {
            queryParams.pageSize = val
            await handleQuery()
        }

        // 改变当前页
        const handleCurrentChange = async (val) => {
            queryParams.pageNum = val
            await handleQuery()
        }

        // 点击编辑
        const handleEdit = async (id) => {
            await user_store.getUserInfo(id)
            diaTitle.value = "编辑用户信息"
            currentId.value = id
            visible.value = true
            isDetail.value = false
        }

        // 点击查看详情
        const handleDetail = async (id) => {
            diaTitle.value = "查看用户信息"
            await handleEdit(id)
            await user_store.getUserInfo(id)
            visible.value = true
            isDetail.value = true
        }

        // 关闭弹出框
        const closeDia = () => {
            visible.value = false
        }

        // 保存弹出框
        const saveDia = async () => {
            const data = {
                id:currentId.value,
                ...userInfo.value
            }
            const res = await user_store.updateUser(data)
            closeDia()
            if (res) {
                ElMessage.success("修改成功")
                await handleQuery()
            } else {
                ElMessage.error("修改失败")
            }
        }

        // 删除用户
        const handleDelete = (id) => {
            ElMessageBox.confirm(
                '是否确认删除该用户？',
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(async () => {
                await user_store.deleteUser(id)
            })
            .catch((err) => {
                ElMessage.error("取消删除")
            })
        }

        const handleChangeAdmin = async (row) => {
            const data = {
                is_admin:row.is_admin,
                id:row.id
            }
            const res = await user_store.updateUser(data)
            if(res){
                ElMessage.success("修改成功！")
                await user_store.getUserList(queryParams)
            }
        }

        // 按钮操作
        const  handleBtn = (name,row) => {
            if(name === 'view'){
                handleDetail(row.id)
            }else if(name === 'edit'){
                handleEdit(row.id)
            }else if(name === 'del'){
                handleDelete(row.id)
            }
        }

        const handleAdd = async () => {
            await user_store.addUser()
            visible.value = false
            ElMessage.success("注册成功")
        }

        // 顶部工具栏
        const handleToolBar = (name) => {
            if(name === 'add'){
                visible.value = true
                diaTitle.value = '新增用户'
            }
        }

        const formatTag = (is_vip) => {
            if(is_vip){
                return <el-tag type="success">是</el-tag>
            }else{
                return <el-tag type="danger">否</el-tag>
            }
        }
        onMounted(async () => {
            await handleQuery()
        })
        return () => {
            return (
                <>
                    <div className="app-container">
                        <SearchFrom
                            queryParams={queryParams}
                            handleQuery={handleQuery}/>
                        <TableList
                            tableData={userList.value}
                            handleSizeChange={handleSizeChange}
                            handleCurrentChange={handleCurrentChange}
                            handleBtn={handleBtn}
                            handleToolBar={handleToolBar}
                            header={header}
                            toolBar={toolBar}
                            total={total.value}
                            operateBtn={operateBtn}
                            v-slots={{
                                is_admin: (row) => {
                                    return <el-switch v-model={row.is_admin} onChange={
                                        ()=>{
                                            handleChangeAdmin(row)
                                        }
                                    }/>
                                },
                                is_vip:(row) => {
                                    return formatTag(row.is_vip)
                                },
                                createdAt:(row) => {
                                    return formatDateTime(row.createdAt)
                                },
                                updatedAt:(row) => {
                                    return formatDateTime(row.updatedAt)
                                },
                            }}
                        />
                        <Dialog
                            visible={visible}
                            diaTitle={diaTitle.value}
                            diaForm={userInfo.value}
                            isDetail={isDetail.value}
                            saveDia={saveDia}
                            handleAdd={handleAdd}
                            closeDia={closeDia}
                        />
                    </div>
                </>
            )
        }
    }
})